<form
  dForm
  ngForm
  [layout]="formLayout"
  [formGroup]="formGroup"
  [dValidateRules]="formConfig.rule"
  #form="dValidateRules"
  (ngSubmit)="submitForm()"
>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.stepTitle' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="stepTitle" formControlName="stepTitle" [dValidateRules]="formConfig.stepTitleRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>

  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-mock.mockDataSize' | translate }}</d-form-label>
        <d-form-control>
          <d-input-number formControlName="mock_data_size" name="mock_data_size" [min]="1"></d-input-number>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
</form>
<d-row [dGutter]="[24, 12]">
  <d-col [dSpan]="24">
    <d-button bsStyle="primary" (btnClick)="addMockData()">{{ 'app.common.operate.new.tip' | translate }}</d-button>
    <d-data-table
      #dataTable
      [dataSource]="dataTableDs"
      [resizeable]="true"
      [tableLayout]="'fixed'"
      [scrollable]="true"
      [fixHeader]="true"
      [size]="'sm'"
      tableHeight="360px"
      [tableOverflowType]="'overlay'"
      [shadowType]="'normal'"
      [containFixHeaderHeight]="true"
    >
      <d-column field="$index" header="#" [width]="'60px'" [fixedLeft]="'0px'"></d-column>
      <d-column
        field="name"
        header="{{ 'datadev.step.source-mock.data.name' | translate }}"
        [width]="'100px'"
        [fixedLeft]="'60px'"
        [editable]="true"
      >
        <d-cell-edit>
          <ng-template let-rowItem="rowItem" let-column="column">
            <div class="customized-editor edit-padding-fix">
              <input
                class="devui-form-control"
                [(ngModel)]="rowItem[column.field]"
                placeholder="{{ 'datadev.step.source-mock.data.name' | translate }}"
              />
            </div>
          </ng-template>
        </d-cell-edit>
      </d-column>
      <d-column field="type" header="{{ 'datadev.step.source-mock.data.type' | translate }}" [width]="'160px'" [editable]="true">
        <d-cell>
          <ng-template let-cellItem="cellItem">
            {{ cellItem.label }}
          </ng-template>
        </d-cell>
        <d-cell-edit>
          <ng-template let-rowItem="rowItem" let-column="column">
            <div class="customized-editor edit-padding-fix">
              <d-select
                [options]="mockDataType"
                [filterKey]="'label'"
                [autoFocus]="true"
                [toggleOnFocus]="true"
                [(ngModel)]="rowItem[column.field]"
                [appendToBody]="true"
              >
                <ng-template let-option="option" let-filterKey="filterKey"> {{ option[filterKey] }} </ng-template>
              </d-select>
            </div>
          </ng-template>
        </d-cell-edit>
      </d-column>
      <d-column field="minValue" header="{{ 'datadev.step.source-mock.data.minValue' | translate }}" [width]="'160px'" [editable]="true">
        <d-cell-edit>
          <ng-template let-rowItem="rowItem" let-column="column">
            <div class="customized-editor edit-padding-fix">
              <input
                class="devui-form-control"
                [(ngModel)]="rowItem[column.field]"
                placeholder="{{ 'datadev.step.source-mock.data.minValue' | translate }}"
              />
            </div>
          </ng-template>
        </d-cell-edit>
      </d-column>
      <d-column field="maxValue" header="{{ 'datadev.step.source-mock.data.maxValue' | translate }}" [width]="'160px'" [editable]="true">
        <d-cell-edit>
          <ng-template let-rowItem="rowItem" let-column="column">
            <div class="customized-editor edit-padding-fix">
              <input
                class="devui-form-control"
                [(ngModel)]="rowItem[column.field]"
                placeholder="{{ 'datadev.step.source-mock.data.maxValue' | translate }}"
              />
            </div>
          </ng-template>
        </d-cell-edit>
      </d-column>
      <d-column field="valueSeed" header="{{ 'datadev.step.source-mock.data.valueSeed' | translate }} " [width]="'160px'" [editable]="true">
        <d-cell-edit>
          <ng-template let-rowItem="rowItem" let-column="column">
            <div class="customized-editor edit-padding-fix">
              <input
                class="devui-form-control"
                [(ngModel)]="rowItem[column.field]"
                placeholder="{{ 'datadev.step.source-mock.data.valueSeed' | translate }}"
                dTooltip
                content="{{ 'datadev.step.source-mock.data.valueSeed.tooltip' | translate }}"
              />
            </div>
          </ng-template>
        </d-cell-edit>
      </d-column>
      <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}" [width]="'80px'" [fixedRight]="'0px'">
        <d-cell>
          <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
            <div class="btn-group">
              <d-button
                icon="icon-delete"
                bsStyle="text-dark"
                (btnClick)="deleteMockData(rowItem, rowIndex)"
                title="{{ 'app.common.operate.delete.label' | translate }}"
              ></d-button>
            </div>
          </ng-template>
        </d-cell>
      </d-column>
    </d-data-table>
  </d-col>
</d-row>
